<template>
  <div class="tips-container">
    <!-- 搜索和操作区域 -->
    <div class="operation-area">
      <el-input
        v-model="searchQuery"
        placeholder="请输入标题或内容关键词"
        style="width: 300px; margin-right: 10px"
        @keyup.enter.native="handleSearch"
      >
        <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
      </el-input>
      
      <el-button type="primary" @click="handleAdd">新增小贴士</el-button>
      <el-button type="danger" @click="handleBatchDelete" :disabled="!selectedTips.length">批量删除</el-button>
    </div>

    <!-- 小贴士表格 -->
    <el-table
      :data="filteredTips"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="category" label="健康主题" width="120"></el-table-column>
      <el-table-column label="有效期" width="220">
        <template slot-scope="scope">
          {{ scope.row.startTime }} 至 {{ scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status ? 'success' : 'danger'">
            {{ scope.row.status ? '启用' : '停用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalTips"
    ></el-pagination>

    <!-- 新增/编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%">
      <el-form :model="tipForm" :rules="rules" ref="tipForm" label-width="120px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="tipForm.title" placeholder="请输入小贴士标题"></el-input>
        </el-form-item>
        
        <el-form-item label="健康主题" prop="category">
          <el-select v-model="tipForm.category" placeholder="请选择健康主题">
            <el-option
              v-for="item in categories"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="有效期" prop="dateRange">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        
        <el-form-item label="状态" prop="status">
          <el-switch
            v-model="tipForm.status"
            active-text="启用"
            inactive-text="停用">
          </el-switch>
        </el-form-item>
        
        <el-form-item label="内容" prop="content">
          <el-input
            type="textarea"
            :rows="10"
            v-model="tipForm.content"
            placeholder="请输入详细内容，支持富文本格式">
          </el-input>
        </el-form-item>
        
        // 在表单中添加样式选项
        <el-form-item label="文字颜色">
          <el-color-picker v-model="tipForm.textColor"></el-color-picker>
        </el-form-item>
        
        <el-form-item label="背景颜色">
          <el-color-picker v-model="tipForm.backgroundColor"></el-color-picker>
        </el-form-item>
        
        <el-form-item label="字体大小">
          <el-select v-model="tipForm.fontSize">
            <el-option label="小" value="12px"></el-option>
            <el-option label="中" value="16px"></el-option>
            <el-option label="大" value="20px"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitTipForm">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'HealthTipsManagement',
  data() {
    return {
      tips: [
        // 模拟数据
        {
          id: 1,
          title: '春季饮食小贴士',
          category: '饮食',
          content: '春季饮食应以清淡为主，多吃新鲜蔬菜水果...',
          startTime: '2023-03-01',
          endTime: '2023-05-31',
          status: true
        },
        {
          id: 2,
          title: '夏季运动注意事项',
          category: '运动',
          content: '夏季运动应避开高温时段，注意补充水分...',
          startTime: '2023-06-01',
          endTime: '2023-08-31',
          status: true
        }
      ],
      categories: [
        { value: '饮食', label: '饮食' },
        { value: '运动', label: '运动' },
        { value: '睡眠', label: '睡眠' },
        { value: '疾病预防', label: '疾病预防' },
        { value: '心理健康', label: '心理健康' }
      ],
      searchQuery: '',
      selectedTips: [],
      currentPage: 1,
      pageSize: 10,
      dialogVisible: false,
      dialogTitle: '新增健康小贴士',
      dateRange: [],
      tipForm: {
        id: '',
        title: '',
        category: '',
        content: '',
        startTime: '',
        endTime: '',
        status: true
      },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        category: [{ required: true, message: '请选择健康主题', trigger: 'change' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        dateRange: [{ required: true, message: '请选择有效期', trigger: 'change' }]
      },
      isEdit: false
    }
  },
  computed: {
    filteredTips() {
      return this.tips.filter(tip => {
        return (
          tip.title.includes(this.searchQuery) ||
          tip.content.includes(this.searchQuery)
        )
      })
    },
    totalTips() {
      return this.filteredTips.length
    }
  },
  methods: {
    handleSearch() {
      this.currentPage = 1
    },
    handleSelectionChange(val) {
      this.selectedTips = val
    },
    handleAdd() {
      this.dialogTitle = '新增健康小贴士'
      this.tipForm = {
        id: '',
        title: '',
        category: '',
        content: '',
        startTime: '',
        endTime: '',
        status: true
      }
      this.dateRange = []
      this.isEdit = false
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.dialogTitle = '编辑健康小贴士'
      this.tipForm = JSON.parse(JSON.stringify(row))
      this.dateRange = [row.startTime, row.endTime]
      this.isEdit = true
      this.dialogVisible = true
    },
    handleDelete(row) {
      this.$confirm('确认删除该健康小贴士?', '提示', {
        type: 'warning'
      }).then(() => {
        const index = this.tips.findIndex(item => item.id === row.id)
        this.tips.splice(index, 1)
        this.$message.success('删除成功')
      })
    },
    handleBatchDelete() {
      this.$confirm('确认删除选中的健康小贴士?', '提示', {
        type: 'warning'
      }).then(() => {
        this.selectedTips.forEach(item => {
          const index = this.tips.findIndex(tip => tip.id === item.id)
          this.tips.splice(index, 1)
        })
        this.selectedTips = []
        this.$message.success('删除成功')
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    submitTipForm() {
      this.$refs.tipForm.validate(valid => {
        if (valid) {
          // 处理日期范围
          if (this.dateRange && this.dateRange.length === 2) {
            this.tipForm.startTime = this.dateRange[0]
            this.tipForm.endTime = this.dateRange[1]
          }
          
          if (this.isEdit) {
            const index = this.tips.findIndex(item => item.id === this.tipForm.id)
            this.tips.splice(index, 1, this.tipForm)
            this.$message.success('修改成功')
          } else {
            const newId = this.tips.length > 0 ? Math.max(...this.tips.map(item => item.id)) + 1 : 1
            this.tipForm.id = newId
            this.tips.push(this.tipForm)
            this.$message.success('添加成功')
          }
          this.dialogVisible = false
        }
      })
    }
  }
}
</script>

<style scoped>
.tips-container {
  padding: 20px;
}

.operation-area {
  margin-bottom: 20px;
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}
</style>